<template>
	<view class="">
		<ImageComparisonSlide
			:height="480"
			:beforeImageSrc="beforeSrc"
			:afterImageSrc="afterSrc"
		></ImageComparisonSlide>
		<view class="chooseBtn">
			<u-button v-if="step === -1" @click="handleChooseImage" text="选择图片" type="primary"></u-button>
			<view v-else-if="step === 1" class="stepTwoBtns">
				<u-button :loading="loading" type="primary" text="开始修复" @click="handleDeal"></u-button>
				<u-button type="warning" text="重新选择" @click="handleChooseImage"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import ImageComparisonSlide from './components/ImageComparisonSlide/index.vue'
import ImageChooseMixin from './mixins/ImageChoose.js'
import { repair } from '../../../api/image.js'
export default {
	components: {
		ImageComparisonSlide,
	},
	mixins: [ImageChooseMixin],
	data() {
		return {
			beforeSrc: require('../../../pages/index/image/repaireOrigin.png'),
			afterSrc: require('../../../pages/index/image/repaireRes.png')
		}
	},
	methods: {
		handleDeal() {
			repair(this.beforeSrc, {
				operation: 'repair'
			}).then(res=>{
				if(res.code === 200) {
					this.afterSrc = res.imgUrl;
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.chooseBtn {
	margin: 30px 40px;
	.stepTwoBtns {
		display: flex;
		justify-content: space-between;
	}
}
</style>